<template>
	<view class="container">
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="nav-title">{{ categoryTitle }}</text>
		</view>
		
		<view class="games-grid">
			<view class="game-card" 
				v-for="game in categoryGames" 
				:key="game.game_id"
				@click="navigateToGameDetail(game.game_id)">
				<view class="game-banner">
					<image :src="game.game_small_background" mode="aspectFill"></image>
					<view class="banner-overlay"></view>
				</view>
				<view class="game-info">
					<image class="game-logo" :src="game.game_logo" mode="aspectFill"></image>
					<view class="game-details">
						<view class="title-row">
							<text class="game-name">{{ game.game_name }}</text>
							<text class="player-count">{{ Math.floor(Math.random() * 1000) }}人在玩</text>
						</view>
						<text class="game-desc">{{ truncateText(game.game_description, 30) }}</text>
						<view class="game-tags">
							<text class="tag" v-for="(tag, index) in formatGameGenre(game.game_genre)" :key="index">
								{{ tag }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { games } from '../../utils/gameData.js';

export default {
	data() {
		return {
			categoryTitle: '',
			categoryGames: []
		}
	},
	onLoad(options) {
		const { category } = options;
		this.categoryTitle = category;
		this.categoryGames = games.filter(game => 
			Array.isArray(game.game_genre) 
				? game.game_genre.includes(category)
				: game.game_genre === category
		);
	},
	methods: {
		navigateToGameDetail(gameId) {
			uni.navigateTo({
				url: `/pages/lobby/gameDetail?id=${gameId}`
			});
		},
		truncateText(text, length = 30) {
			if (text && text.length > length) {
				return text.substring(0, length) + '...';
			}
			return text;
		},
		goBack() {
			uni.navigateBack();
		},
		formatGameGenre(genre) {
			if (Array.isArray(genre)) {
				return genre;
			}
			return [genre];
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
}

.nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 44px;
	padding-top: var(--status-bar-height);
	background: #2D2D44;
	display: flex;
	align-items: center;
	padding: 0 12px;
	z-index: 100;
	border-bottom: 1px solid rgba(110, 108, 137, 0.1);
}

.back-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	color: #9796B8;
	font-size: 24px;
}

.nav-title {
	flex: 1;
	color: #9796B8;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin-right: 32px;
}

.games-grid {
	margin-top: calc(44px + var(--status-bar-height));
	padding: 12px;
}

.game-card {
	background: #2D2D44;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 12px;
	border: 1px solid rgba(151, 150, 184, 0.1);
}

.game-banner {
	position: relative;
	width: 100%;
	height: 140px;
}

.game-banner image {
	width: 100%;
	height: 100%;
}

.banner-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(to bottom, transparent, rgba(45, 45, 68, 0.9));
}

.game-info {
	padding: 12px;
	display: flex;
	gap: 12px;
}

.game-logo {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	flex-shrink: 0;
	border: 1px solid rgba(151, 150, 184, 0.1);
}

.game-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.game-name {
	color: #9796B8;
	font-size: 16px;
	font-weight: bold;
}

.player-count {
	color: #6E6C89;
	font-size: 12px;
	background: rgba(110, 108, 137, 0.1);
	padding: 2px 6px;
	border-radius: 4px;
}

.game-desc {
	color: #6E6C89;
	font-size: 12px;
	line-height: 1.4;
}

.game-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tag {
	background: rgba(151, 150, 184, 0.1);
	color: #9796B8;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
}

/* 添加点击效果 */
.game-card:active {
	transform: scale(0.98);
	transition: transform 0.15s ease;
}

.back-btn:active {
	opacity: 0.7;
}
</style> 